<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<style>
		*{
			margin: 0;
			padding: 0;
		}
		.container{
			width: 800px;
			margin:20px auto;
		}
		.sppl{
			padding:25px 40px;
			overflow: hidden;
		}
		.sppl_left,.sppl_right{
			float: left;
		}
		.sppl_left{
			width: 90px;
		}
		.sppl_left span{
			font-size:46px;
		}
		.sppl_left p:nth-child(2){
			color:#E4393C;
		}
		.sppl_right{
			overflow: hidden;
			width: 600px;
		}
		.sppl_right span{
			float: left;
			padding:3px 5px;
			border: 1px solid #ccc;
			margin-right: 5px;
			font-size:12px;
			margin-bottom: 5px;
		}

		.userpl{
			overflow: hidden;
		}
		ul{
			list-style: none;
		}
		ul li{
			padding:15px;
			overflow: hidden;
		}
		.userpl_left,.userpl_right{
			float: left;
		}
		.userpl_left{
			width: 150px;
		}
		.userpl_left img{
			width: 26px;
			height: 26px;
			border-radius: 50%;
		}
		.pics img{
			width: 50px;
			height: 50px;
		}
		.userpl_right{
			width: 600px;
		}

         .fenye{
         	text-align: center;
         }  
		.fenye span{
			padding:3px 5px;
			border: 1px solid #ccc;
			margin-right: 5px;
			cursor: pointer;
		}
		.fenye span.active{
			border: none;
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="sppl">
			<div class="sppl_left">
				<p>好评度</p>
				<p><span>11</span>%</p>
			</div>
			<div class="sppl_right">
				<!-- <span>就是快(4913)</span><span>就是快(4913)</span> -->
			</div>
		</div>
		<div class="userpl">
			<p><span>全部评价(62万+)</span> <span>晒图(500)</span> <span>追评(7200+)</span> <span>好评(61万+)</span> <span>中评(6800+)</span> <span>差评(5900+)</span></p>
			<ul id="list">
				
			</ul>
		</div>
	</div>
	<div class="fenye">
		
	</div>
</body>
<script type="text/template" id="muban">
	<li>
		<div class="userpl_left">
			<p><img src="http://%userImageUrl%" alt="">
			<span>%nickname%</span></p>
			<p>%userlevel%</p>
		</div>
		<div class="userpl_right">
			<p>%content%</p>
			<div class="pics">
				%pics%
			</div>
			<p><span>%productColor%</span><span>%productSize%</span><span>%saleValue%</span><span>%creationTime%</span><span>%usefulVoteCount%</span><span>%replyCount%</span></p>
		</div>
	</li>
</script>
<script src="../jquery-1.10.1.min.js"></script>
<script>
	//https://sclub.jd.com/comment/productPageComments.action?callback=demo&productId=5105026&score=0&sortType=5&page=1&pageSize=10&isShadowSku=0&rid=0&fold=1
	// 定义一个全局变量保存当前页码
	var nowindex = 1;
	function demo(data){
		console.log(data)
		$('.fenye').empty();
		$(".sppl_left span").empty();
		$('.sppl_right').empty();
		$('#list').empty();
		/*
			分页：
				加载时 上一页 1-6 + ... 下一页
				页码大于等于5时  上一页  1 .. 中间有5个，选中的这个在5个中间,后面 ... 下一页
		*/
		if(data.maxPage>6){
			if(nowindex<5){
				$("<span>上一页</span>").appendTo('.fenye');
				for(var i=1; i<=6; i++){
					$("<span>"+i+"</span>").appendTo('.fenye');
				}
				$("<span>...</span>").appendTo('.fenye');
				$("<span>下一页</span>").appendTo('.fenye');
			}else if(nowindex>=5 && nowindex<(data.maxPage-5)){
				$("<span>上一页</span>").appendTo('.fenye');
				$("<span>1</span>").appendTo('.fenye');
				$("<span>...</span>").appendTo('.fenye');
				for(var i=nowindex-2; i<=parseInt(nowindex)+2; i++){
					$("<span>"+i+"</span>").appendTo('.fenye');
				}
				$("<span>...</span>").appendTo('.fenye');
				$("<span>下一页</span>").appendTo('.fenye');
			}else{
				$("<span>上一页</span>").appendTo('.fenye');
				$("<span>1</span>").appendTo('.fenye');
				$("<span>...</span>").appendTo('.fenye');
				for(var i=data.maxPage-5; i<=data.maxPage; i++){
					$("<span>"+i+"</span>").appendTo('.fenye');
				}
				$("<span>下一页</span>").appendTo('.fenye');
			}
			$('.fenye span').each(function(){
				if($(this).html() == nowindex){
					$(this).addClass('active').siblings().removeClass('active');
				}
			})
			// 绑定事件：
			$(".fenye span").click(function(){
				var page = $(this).html();
				if(page.trim() == '上一页'){
					nowindex--;
					if(nowindex<1){
						nowindex=1;
						return;
					}
				}else if(page.trim() == '下一页'){
					nowindex++;
					if(nowindex>data.maxPage){
						nowindex=data.maxPage;
						return;
					}
				}else if(page.trim() == '...'){
					return;
				}else{
					nowindex = page;
					// $(this).addClass('active').siblings().removeClass('active');
				}
				$('.fenye span').each(function(){
					if($(this).html() == nowindex){
						$(this).addClass('active').siblings().removeClass('active');
					}
				})
				var oscript = document.createElement('script');
				oscript.src = 'https://sclub.jd.com/comment/productPageComments.action?callback=demo&productId=5105026&score=0&sortType=5&page='+nowindex+'&pageSize=10&isShadowSku=0&rid=0&fold=1';
				$("body").append(oscript);
			})
		}

		// 加载页面
		$(".sppl_left span").html(data.productCommentSummary.goodRateShow);
		for(var k = 0 ; k<data.hotCommentTagStatistics.length; k++){
			var temp = data.hotCommentTagStatistics[k];
			$("<span>"+temp['name']+"("+temp['count']+")</span>").appendTo('.sppl_right');
		}
		//加载模板
		var str = $("#muban").html();
		for(var m =0; m <data.comments.length;m++){
			var res = data.comments[m];
			// 模板修正
			if(res.userLevelName.trim() == 'PLUS会员'){
				res.userlevel = res.userLevelName;
			}else{
				res.userlevel = '京享值'+res.userExpValue;
			}
			// 图片
			res.pics = '';
			if(res.images){
				for(var k=0; k<res.images.length; k++){
					res.pics += "<img src='http:"+res.images[k]['imgUrl']+"'>";
				}
			}
			// 配置
			res.saleValue = res.productSales[0]['saleValue'];
			//替换
			var str1 = str.replace(/%(\w+)%/gi,function(w,$1){
				return res[$1];
			});
			$(str1).appendTo('#list'); 
		}
	}
	

	var oscript = document.createElement('script');
	oscript.src = 'https://sclub.jd.com/comment/productPageComments.action?callback=demo&productId=5105026&score=0&sortType=5&page='+nowindex+'&pageSize=10&isShadowSku=0&rid=0&fold=1';
	$("body").append(oscript);
	/*
	
	*/
</script>
</html>